<template>
    <div class="page">
        <div class="page-top">
            <!-- 面包屑 -->
            <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
        </div>
        <div class="page-content">
            <a-table :loading='loading' :columns="columns" :data-source='data' :pagination='false'>
                <template slot="id" slot-scope="id">
                    <a-button type='primary' @click="onChange(id)">修改</a-button>
                </template>
            </a-table>
            <a-modal :visible="visible" title="修改" @ok="onSubmit" @cancel="handleCancel" width="600px">
                <a-form-model :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="仓库名称">
                        <a-input style="width:200px" v-model='form.name'></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="仓库编码">
                        <a-input style="width:200px" v-model='form.warehouseCode'></a-input>
                    </a-form-model-item>
                   
                    <!-- <a-form-model-item>
                        <a-button style="margin-left:113px" type='primary' @click="onSubmit">确定</a-button>
                    </a-form-model-item> -->
                </a-form-model>
            </a-modal>
        </div>
    </div>
</template>

<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { getWarehouse, updateWarehouse } from "@/request/api";
export default {
    data() {
        return {
            headers: {
                authorization: 'authorization-text',
            },
            hreadcrumbAry: [
                { name: "首页", path: "/", query: {} },
                { name: "飞迩仓库", path: "/warehouse", query: {} },
            ],
            columns: [
                {
                    title: 'ID',
                    dataIndex: "id",
                    key: '',
                },
                {
                    title: '仓库名称',
                    dataIndex: "name",
                    key: '',
                },
                {
                    title: '仓库编码',
                    dataIndex: "warehouseCode",
                    key: '',
                },
                {
                    title: '操作',
                    dataIndex: "",
                    key: '',
                    slots: { title: "操作" },
                    scopedSlots: { customRender: "id" },
                },
            ],
            data: [],
            form: {
                id: '',
                name: '',
                warehouseCode: '',
            },
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
            loading: false,
            current: '',
            visible: false
        }
    },
    components: {
        Hreadcrumb,
    },
    created() {
        this.getWarehouse();
    },  
    methods: {
        async getWarehouse() {
            this.loading = true
            let { data } = await getWarehouse()
            console.log(data)
            this.loading = false
            if (data.success) {
                this.data = data.content
                this.form.id = data.content[1].id
            } else {
                this.error(data.message)
            }
        },
        async updateWarehouse(param) {
            let { data } = await updateWarehouse(param)
            console.log(data)
            if (data.success) {
                this.form = {
                    name:'',
                    warehouseCode:''
                }
                this.getWarehouse()

            } else {
                this.error(data.message)
            }
        },
        onSubmit() {
            console.log(this.form)
            this.form.id = this.current
            this.visible = false
            this.updateWarehouse(this.form)
        },
        onChange(e) {
            console.log(e)
            this.current = e.id
            this.visible = true
            this.form.name = e.name
            this.form.warehouseCode = e.warehouseCode
        },
        handleCancel() {
            this.current = ''
            this.visible = false
        },
    }
}
</script>

<style>
.page-content {
    background-color: #fff;
    padding: 25px;
}
</style>
